<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="../static/admin/layui/css/layui.css">
    <link rel="stylesheet" href="../static/admin/css/bootstrap.css">

</head>
<body>
<div class="layui-fluid">
    <h1 class="text-center layui-bg-blue ">登录</h1>
    <div class="text text-success mb-3">
        <!--<a class="float-right btn mr-5 bg-warning" id="nn">testName:</a>-->
        <!--<span id="showName" class="float-right font-weight-bolder text-dark mr-3"></span>-->
    </div>

</div>
<div class="layui-container">
    <div class="">
        <form class="layui-form w-50 mx-auto" id="form">
            <div class="layui-form-item my-5">
                <label for="a" class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" id="a" class="layui-input" name="username">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="b" class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="text" id="b" class="layui-input" name="userPassword">
                </div>
            </div>
            <div class="layui-form-item mt-5">
                <label for="c" class="layui-form-label">验证码</label>
                <div class="layui-input-block d-flex justify-content-center">
                    <input type="text" id="c" class="layui-input" name="yzm">
                    <div><img src="/checkCode" alt="" id="img" onclick="changeCheckCode(this)"></div>
                    <script type="text/javascript">
                        //点击更新图片
                        function changeCheckCode(img) {
                            img.src = "/checkCode?" + new Date().getTime();
                        }
                    </script>
                </div>
            </div>
            <div></div>
            <div class="layui-form-item mt-5">
                <div class="layui-input-block">
                    <button class="layui-btn" id="sub" type="button">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
            <div class="layui-form-item">
                <div id="msg" class="mt-5 text-center text-danger"></div>
            </div>
        </form>
    </div>
</div>
<script src="../static/admin/js/jquery-3.4.1.js"></script>
<script src="../static/admin/layui/layui.js"></script>
<script>

    $("#sub").click(function () {
        $.post({
            url: "/toLogin",
            data: $("#form").serialize(),
            success: function (data) {
                if (data.flag) {
                    location.href = "/views/success.html";
                    $("#msg").html("")
                } else {
                    $("#msg").html(data.msg);
                    $("#img").attr("src","/checkCode?" + new Date().getTime());//登录失败后验证码更新
                }
            },

        });
    });
    //表单验证
    $("#a").blur(function () {
        if (!$(this).val()) {
            $(this).css("border-color", "red");
            $("#msg").html("姓名不能为空！！");
            // return false;
        } else {
            $(this).css("border-color", "")
            // return true;
        }
    });
    $("#b").blur(function () {
        if (!$(this).val()) {
            $(this).css("border-color", "red");
            $("#msg").html("密码不能为空！！");
        } else {
            $(this).css("border-color", "")
        }
    });
    $("#c").blur(function () {
        if (!$(this).val()) {
            $(this).css("border-color", "red");
            $("#msg").html("验证码不能为空！！");
        } else {
            $(this).css("border-color", "")
        }
    });


    //获取当前用户名称
    /*  $.post("/getUsername", {}, function (data) {
          $("#showName").html("欢迎" + data);
          // console.log(data)
      })*/

    //不一样
    /*layer.use(["jquery", "element"], function () {
    })*/
</script>
</body>
</html>